<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的音乐-CC音乐-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>
<jsp:include page="headLink.jsp"></jsp:include>
<link
	href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"
	rel="stylesheet">
<!-- <link rel="stylesheet" href="css/profile.css"> -->
<!-- <link rel="stylesheet" href="css/layout_0321.css"> -->
<!-- <link rel="stylesheet" href="//y.gtimg.cn/mediastyle/yqq/layout_0321.css?max_age=25920000&v=20190312" /> -->
<!-- <link rel="stylesheet" href="//y.gtimg.cn/mediastyle/yqq/profile.css?max_age=2592000&v=20181206" /> -->
</head>
<body>
	<jsp:include page="playit.jsp"></jsp:include>
	<!--整个页面-->
	<div class="lyear-layout-container">
		<!--导航栏-->
		<header class="lyear-layout-header"> <!--保持居中的秘密不可更改！！！-->
		<div class="header-container">
			<div class="header-top">
				<a href="homePage.jsp" class="logo"></a>
				<nav class="header-nav">
				<ul>
					<li><a href="homePage.jsp" target="">音乐馆</a></li>
					<li><a href="#rank" class="header-nav__cur">我的音乐</a></li>
				</ul>
				</nav>
				<div class="header-search">
					<input type="text" id="searchmusic" class="szh_text" placeholder="搜索" onkeypress="if(event.keyCode==13)searchMusic()">
					<!--<div class="btn"><i class="icon-sprite"></i></div>-->
					<div class="result">
						<a href="#" class="result-item"> <span class="rank">1</span> <span
							class="title">默</span> <span class="num">3.4万</span>
						</a> <a href="#" class="result-item"> <span class="rank">2</span>
							<span class="title">侧田</span> <span class="num">3.4万</span>
						</a> <a href="#" class="result-item"> <span class="rank">3</span>
							<span class="title">让我留在你身边</span> <span class="num">3.4万</span>
						</a> <a href="#" class="result-item"> <span class="rank">4</span>
							<span class="title">皮皮虾我们走</span> <span class="num">3.4万</span>
						</a> <a href="#" class="result-item"> <span class="rank">5</span>
							<span class="title">欢乐好声音</span> <span class="num">3.4万</span>
						</a>
						<div class="history">
							<span>搜索历史</span> <i class="icon-sprite"></i>
						</div>
					</div>
				</div>

				<ul class="topbar-right login-mod">
					<li class="dropdown dropdown-profile"><a
						href="javascript:void(0)" data-toggle="dropdown"> <img
							class="img-avatar img-avatar-48 m-r-10"
							src="images/headPhoto1.jpg" alt="灰质"> <span id="myname2">${sessionScope.user.uname}<span
								class="caret"></span></span>
					</a>
						<ul class="dropdown-menu dropdown-menu-right">
							<li><a href="userInfo.jsp"><i class="mdi mdi-account"></i>
									个人信息</a></li>
							<li><a href="#" data-toggle="modal" data-target="#updatepwd"><i
									class="mdi mdi-lock-outline"></i> 修改密码</a></li>
							<li class="divider"></li>
							<li><a href="../loginOutServlet"><i
									class="mdi mdi-logout-variant"></i> 退出登录</a></li>
						</ul></li>
				</ul>
			</div>
		</div>
		</header>
		<!--页面主要内容-->
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-12 profilebg">
					<div class="mesosphere-photo">
						<div class="profile_cover_link">
							<img class="head_photo" src="images/headPhoto1.jpg"
								onerror="this.src='//y.gtimg.cn/mediastyle/global/img/person_300.png?max_age=31536000';this.onerror=null;"
								alt="@Arya." class="profile__cover" id="profileHead">
						</div>
					</div>
					<div class="mesosphere-name">
						<div class="profile_cover_name_link">${sessionScope.user.uname}

						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-2">
					<div class="grid-demo"></div>
				</div>
				<div class="col-md-8">

					<div class="card-body">
						<ul class="nav nav-tabs nav-justified">
							<li class="active"><a data-toggle="tab" href="#home-basic"
								aria-expanded="true">我喜欢</a></li>
							<li class="nav-item"><a data-toggle="tab"
								href="#profile-basic" aria-expanded="false">我创建的歌单</a></li>
							<!--<li class="nav-item">
									<a data-toggle="tab" href="#messages-basic" aria-expanded="false">梁羽生</a>
								</li>
								<li class="nav-item">
									<a data-toggle="tab" href="#settings-basic" aria-expanded="false">陈青云</a>
								</li>-->
						</ul>
						<div class="tab-content">
							<!--tab-pane fade active in点击进行两个面板的切换-->
							<!--切换面板后的显示数据class="tab-pane fade" -->
							<div class="tab-pane fade active in" id="home-basic">
								<div class="songlist_toolbar" style="margin-bottom: 20px;">
									<button class="btn btn-success btn-label btn-w-md all_play">
										<label><i class="mdi mdi-play-circle-outline"></i></label>播放全部
									</button>
									<button class="btn btn-secondary btn-label btn-w-md all_fav">
										<label><i class="mdi mdi-library-plus"></i></label>添加到
									</button>
									<button class="btn btn-secondary btn-label btn-w-md all_down">
										<label><i class="mdi mdi-arrow-down-bold"></i></label>下载
									</button>
									<button class="btn btn-secondary btn-label btn-w-md batch">
										<label><i class="mdi mdi-menu"></i></label>批量操作
									</button>
								</div>
								<table class="table table-hover" id="music-collection"
									style="width: 100%;">
									<thead>
										<tr>
											<th style="width: 7%;">#</th>
											<th style="width: 40%;">歌曲</th>
											<th style="width:;"></th>
											<th>歌手</th>
											<th>艺术派别</th>
											<!--<th>时长</th> -->
										</tr>
									</thead>

								</table>
							</div>

							<div class="tab-pane fade" id="profile-basic">
								<div class="playerlist_toolbar" style="margin-bottom: 20px;">
									<button
										class="btn btn-success btn-label btn-w-md all_play create_new">
										<label><i class="mdi mdi-play-circle-outline"></i></label>新建歌单
									</button>
									<!--<button class="btn btn-secondary btn-label btn-w-md all_fav"><label><i class="mdi mdi-play-circle-outline"></i></label>添加到</button>-->
									<!--<button class="btn btn-secondary btn-label btn-w-md all_down"><label><i class="mdi mdi-play-circle-outline"></i></label>下载</button>-->
									<button class="btn btn-secondary btn-label btn-w-md batch">
										<label><i class="mdi mdi-play-circle-outline"></i></label>批量操作
									</button>
								</div>
								<!--第二个面板的左侧导航栏显示歌单详情-->

								<table class="table table-hover" id="list-collection"
									style="width: 100%">
									<thead>
										<tr>
											<th style="width: 7%;">#</th>
											<th>id</th>
											<th style="width: 40%;">封面</th>
											<th>歌单</th>
											<th>曲目数</th>
										</tr>
									</thead>
								</table>

							</div>
						</div>
					</div>
				</div>
				<div class="col-md-2">
					<div class="grid-demo"></div>
				</div>
			</div>
			<!--<div class="row">
					<div class="footer-copyright">
						<p>华夏易正（北京）文化传媒有限公司 版权所有 京ICP备15041558号</p>
						<p>电话：400-666-4061 地址：北京市海淀区羊坊店路18号1幢11层1110室</p>
					</div>
				</div>-->
		</div>
		<!-- 修改密码模态框 -->
		<div class="modal fade" id="updatepwd" tabindex="-1" role="dialog"
			aria-labelledby="updatepwd">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="exampleModalLabel">密码修改</h4>
					</div>
					<div class="modal-body">
						<form>
							<div class="form-group">
								<label for="user-name" class="control-label">原密码：</label> <input
									type="password" class="form-control" id="updatepwd1"
									placeholder="请输旧密码...">
							</div>

							<div class="form-group">
								<label for="user-pwd" class="control-label">新密码：</label> <input
									type="password" class="form-control" id="updatepwd2"
									placeholder="请输新密码...">
							</div>

							<div class="form-group">
								<label for="user-pwd" class="control-label">再次新密码：</label> <input
									type="password" class="form-control" id="updatepwd3"
									placeholder="请再次输入新密码...">
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" id="btn_update">确认修改</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--tabs标签页的必备-->
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
	<!--下面这个会报错no element is specified to initialize -->
	<!--<script type="text/javascript" src="js/main.min.js"></script> -->
	<script src="js/script.js"></script>
	<script src="layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript"
		src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript"
		src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
	<script type="text/javascript"></script>
	<script>
	
// 		window.onload=function (){
// 			$("#myname2").html("${sessionScope.user.uname}"+<span class='caret'></span>);
// 		}
		layui.use('element', function() {
			var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
			//监听导航点击
			element.on('nav(demo)', function(elem) {
				//console.log(elem)
				layer.msg(elem.text());
			});
		});
		layui.use([ 'carousel', 'form' ], function() {
			var carousel = layui.carousel, form = layui.form;
			carousel.render({
				elem : '#test10',
				width : '778px',
				height : '440px',
				interval : 5000
			});
		});
		//显示我喜欢的歌曲，由datatables插件提供
		//表头里面的小杂质好像是排序用的
		var t1 = 1;
		var t2 = 2;
		$(function() {
			//var extraEle = 1;
			t1 = $('#music-collection').DataTable({
				//默认保留搜索功能
				"paging": true,//分页功能启用与否
			    "ordering": false,//顺序倒序显示与否
			    //"info": false,//页脚信息显示与否
				ajax : "../ums.do?op=getlovedsongs&uid=1",
				//第一列
		        //order: [[ 1, 'asc']],						
				columns : [ 
					{data : null},
					{data : "mname"},
					{"defaultContent" : "<div class='szh_icons'><div><i class='mdi mdi-skip-next playit' id=''></i><i class='mdi mdi-heart-outline'></i><i class='mdi mdi-arrow-down'></i><i class='mdi mdi-delete'></i></div></div>"},
					{data : "url"}, 
					{data : "tname"},
					//{data : "mlike"}, 
					//{data : "url"}, 
					//{data : "collect"}, 
					//{data : "download"},
					//{"defaultContent" : "<button class='btn btn-danger'><i class='mdi mdi-window-close'></i>删除</button>&nbsp;&nbsp;<button class='btn btn-info' data-toggle='modal' data-target='#myModal'><i class='mdi mdi-window-close'></i>更新</button>"}
					//"extraEle" : "<div class='szh_icons'><div><i class='mdi mdi-skip-next playit' ></i><i class='mdi mdi-heart-outline'></i><i class='mdi mdi-arrow-down'></i><i class='mdi mdi-delete'></i></div></div>",
				]
				
// 				columnDefs : [ {
// 		        	searchable : false,
// 		        	orderable : false,
// 		        	targets : 0
// 		        } ],
				
// 		        columnDefs : [ {
// 		        	searchable : false,
// 		        	orderable : false,
// 		        	targets : 2,
// 		        	 "render": function(data, type, full) { // 返回自定义内容
//                          return extraEle;
//                      }
// 		        } ]
			});
			//第一列序号自增
			t1.on( 'order.dt search.dt', function () {
				t1.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
			    	cell.innerHTML = i+1;
			    });
			}).draw();
			//为每一个tr添加事件即响应函数
			//$('#music-collection tbody tr');
			t1.on('mouseover', 'tr', function() {
				//console.log($(this).find("i").css("opacity",1));
				$(this).find("i").css("opacity",1);
				var song_id = $(this).find('td').eq(3).text();
				$(this).find("i").eq(0).attr("id",song_id);
				//$($(t1.row(this)).find('i')).css("opacity", "1");
			});
			t1.on('mouseout', 'tr', function() {
				//console.log($(this).find("i").css("opacity",1));
				$(this).find("i").css("opacity",0);
				
				//$($(t1.row(this)).find('i')).css("opacity", "1");
			});
			
			t2 = $('#list-collection').DataTable({
				//默认保留搜索功能
				"paging": true,//分页启用与否
			    "ordering": false,//顺序倒序显示与否
			    //"info": false,//页脚信息显示与否
				ajax : "../ums.do?op=getlovedlists&uid=1",
				columnDefs : [ {
			        searchable : false,
			        orderable : false,
			        targets : 0
			        } ],
				columns : [
					{data : null},
					{data : "lid"},
					{data : "lcover"},
					{data : "lname"},
					{data : "counts"}
					//{data : "counts"}, 
					//{data : "tname"},
					//{data : "mlike"}, 
					//{data : "url"}, 
					//{data : "collect"}, 
					//{data : "download"},
					//{"defaultContent" : "<button class='btn btn-danger'><i class='mdi mdi-window-close'></i>删除</button>&nbsp;&nbsp;<button class='btn btn-info' data-toggle='modal' data-target='#myModal'><i class='mdi mdi-window-close'></i>更新</button>"}
				]
			});
			t2.on( 'order.dt search.dt', function () {
				t2.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
			    	cell.innerHTML = i+1;
			    });
			}).draw();
			//为每一个tr添加事件即响应函数
			t2.on('click', 'tr', function() {
				alert("?");
				var s = $(this).find('td').eq(1).text();
				window.open("listDetails.jsp?lid=" + s);
				//var s = t2.row(this).data();
				//alert('You clicked on '+s[0]+'\'s row');
			});
		});
	</script>
	<script type="text/javascript">
	<!-- 修改密码功能，校验输入的旧密码是否与session中的密码相同  --wwb -->
		$(function(){
			$("#updatepwd1").blur(function(){
				var flag=${sessionScope.user!=null};
				if(flag){
					$("#updatepwd2").removeAttr("readonly");
					$("#updatepwd3").removeAttr("readonly");
					var oldpwd=$("#updatepwd1").val();
					var pwd=${sessionScope.user.pwd};
					console.log(pwd);
					if(oldpwd!=pwd){
						layui
						.use(
								[
										'layer',
										'form' ],
								function() {
									var layer = layui.layer
									layer
											.alert(
													"密码错误",
													{
														icon : 2,
														skin : 'layer-ext-moon'
													})
								})
								$("#updatepwd2").attr("readonly",true);
								$("#updatepwd3").attr("readonly",true);
						
					}
				}
				
				
			});
			//修改密码功能，再次输入密码与新密码比较   wwb
			$("#updatepwd3").blur(function(){
				$("#btn_update").attr("disabled", false);
				var newpwd=$("#updatepwd2").val();
				var renewpwd=$("#updatepwd3").val();
				if(renewpwd!=newpwd){
					layui
					.use(
							[
									'layer',
									'form' ],
							function() {
								var layer = layui.layer;
								layer
										.alert(
												"密码不一致",
												{
													icon : 2,
													skin : 'layer-ext-moon'
												})
							})
							$("#btn_update").attr("disabled", true); 
				}
				
			});
			
			
			//修改密码功能，确认修改按钮事件   wwb
			$("#btn_update").click(function(){
				var oldpwd=$("#updatepwd1").val();
				var newpwd=$("#updatepwd2").val();
				var renewpwd=$("#updatepwd3").val();
				var uid=${sessionScope.user.uid};
				//console.log(uid);
				$.ajax({
					type:"post",
					url:"../ZhuCeServlet?op=updatePwd",
					data:{
						"oldpwd":oldpwd,
						"newpwd":newpwd,
						"uid":uid
					},
					success:function(data){
						if(data.msg=="修改成功"){
							layui
							.use(
									[
											'layer',
											'form' ],
									function() {
										var layer = layui.layer;
										layer
												.alert(
														"修改成功，请重新登入",
														{
															icon : 2,
															skin : 'layer-ext-moon',
															time : 5000
														})
													
									})
									window.location.href="../loginOutServlet";
						}
					}
					
				});
			});
			
		});
		
		
		</script>
		<!-- cyf用户在输入框搜索音乐的方法 -->
		<script type="text/javascript">
			function searchMusic() {
				//console.log($("#searchmusic").val());
				window.open("searchListTest.jsp?search="+$("#searchmusic").val());
			}


		</script>
		<!-- cyf用户在输入框搜索音乐的方法结束 -->

	<script src="js/bootstrap-notify.min.js"></script>
	<script type="text/javascript" src="js/lightyear.js"></script>
	<script src="js/homePage.js" charset="utf-8"></script>

</body>
</html>